﻿<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>曲线展示</title>
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="./Scripts/ECharts/echarts.min.js"></script>
    <script type="text/javascript" src="./Scripts/ECharts/jquery.min.js"></script>
    <!--    <script type="text/javascript" src="./data.js"></script>-->
    <!--<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>-->
   
    <script type="text/javascript">
        function getDataX() {
            return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        }
        function getDataY() {
            return [10, 25, 30, 25, 25, 50, 65, 68, 88, 95];
        }
        function onMouse(params) {
            // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
            var dataPosition = {
                dataPosition: params.dataIndex,
                data: params.data
            };
            let url = "http://localhost:8008/dataPosition";
            $.ajax({
                url: url,
                method: "POST",
                data: JSON.stringify(dataPosition),
                contentType: "application/json",
                success: function (response) {
                    console.log("位置上传成功");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log("上传失败: " + errorThrown);
                }
            });
        }
        const dom = document.getElementById('container');
        const myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        const app = {};
               
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },

            grid: [
                { left: '7%', top: '7%', width: '65%', height: '50%' },
                { right: '0%', top: '7%', width: '25%', height: '50%' },
                { left: '7%', top: '65%', width: '65%', height: '15%' },
                {
                    left: '7%', bottom: '1%', width: '65%', height: '15%',                   
                    show: true
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    gridIndex: 0
                },
                {
                    type: 'value',
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        alignWithLabel: true,
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    minorSplitLine: {
                        show: false
                    },
                    gridIndex: 1
                },
                {
                    type: 'category',
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        alignWithLabel: true,
                        show: false
                    },
                    gridIndex: 2
                },
                {
                    type: 'category',
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        alignWithLabel: true,
                        show: false
                    },
                    gridIndex: 3
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    gridIndex: 0
                },
                {
                    type: 'category',
                    //data: [10, 20, 30, 40, 50, 60, 70],
                    data: [0, 20, 40, 60, 80, 100],
                    axisTick: {
                        alignWithLabel: true,
                        show: true,
                        inside: true
                    },
                    axisLabel: {
                        margin: 2
                    },
                    minorSplitLine: {
                        show: false
                    },
                    splitLine: {
                        show: true
                    },
                    //max:'dataMax',
                    //min:'dataMin',
                    boundaryGap: false,
                    inverse: false,
                    gridIndex: 1
                },
                {
                    type: 'value',
                    gridIndex: 2
                },
                {
                    type: 'value',
                    gridIndex: 3
                }
            ],
            graphic: {
                elements: [
                    {
                        type: 'text',
                        left: '75%', // 相对父元素居中
                        top: '65%', // 相对父元素居中
                        style: {
                            fill: '#777',
                            text: ['This is text', '这是一段文字', 'Print some text'].join('\n'),
                            font: '14px Microsoft YaHei'
                        }
                    }
                ]
            },
            series: [
                {
                    name: 'bar1',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 100, 34, 90, 30, 20]
                },
                {
                    name: 'line2',
                    type: 'line',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330],
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'blue' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'lightBlue' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    smooth: true,
                    markLine: {
                        data: [
                            {
                                yAxis: 4
                            }
                        ],
                        symbol: 'circle',
                        silent: true,
                        lineStyle: {
                            color: 'rgba(255, 25, 0, 1)',
                            width: 2
                        }
                    },
                    yAxisIndex: 1,
                    xAxisIndex: 1
                },
                {
                    name: '直接访问2',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330, 220],
                    yAxisIndex: 2,
                    xAxisIndex: 2
                },
                {
                    name: '直接访问3',
                    type: 'line',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330, 220],
                    yAxisIndex: 3,
                    xAxisIndex: 3
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        option = myChart.getOption();
        option.xAxis[0].data = getDataX();
        option.series[0].data = getDataY();
        myChart.setOption(option);

        myChart.on('mouseover', { seriesName: 'bar1' }, function (params) {
            onMouse(params);
        });

        myChart.on('click', function (params) {
            if (params.componentType === 'markPoint') {
                // 点击到了 markPoint 上
                console.log('markPoint click');
                if (params.seriesIndex === 1) {
                    // 点击到了 index 为 5 的 series 的 markPoint 上。
                    console.log('markPoint line1 click');
                }
            } else if (params.componentType === 'series') {
                if (params.seriesType === 'line') {
                    console.log('line1 click');
                    onMouse(params);
                }
            }
        });

        setInterval(function () {
            let url = "http://localhost:8008/data.json";
            $.ajax({
                url: url,
                method: 'GET',
                success: function (response) {
                    // 请求成功的处理逻辑
                    //let jsonData = JSON.stringify(response);
                    // 在这里可以使用JSON数据
                    let sexOption = myChart.getOption();
                    //var d=JSON.parse(jsonData);
                    sexOption.series[0].data = response[0].Y;
                    sexOption.xAxis[0].data = response[0].X;
                    myChart.setOption(sexOption);

                },
                error: function (xhr, status, error) {
                    // 请求失败的处理逻辑
                    console.error('Error:', error);
                }
            });
        }, 2000);

        window.addEventListener('resize', myChart.resize);

    </script>
</body>

</html>